<!-- 运行故障 -->
<template>
	<view class="container">
		<block v-for="(fault, index) in faults" :key="index">
			<view class="item" :class="[fault.faultCode === 'F000' ? 'relief' : 'fault']">
				<view>
					<view v-if="fault.faultCode === 'F000'">故障解除</view>
					<view v-else class="code">故障码：{{ fault.faultCode }}</view>
					<view>{{ fault.faultTime }}</view>
				</view>
				<view v-if="fault.faultCode !== 'F000'">{{ fault.faultDesc }}</view>
			</view>
		</block>
		<view v-if="!faults.length" class="item relief">
			<view>
				<view >设备运行正常</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			faults: []
		};
	},
	onLoad(optios) {
		this.machineId = optios.machineId || '';
		this.page = 1;
		this.getFaultInfo();
	},
	onReachBottom() {
		this.page++;
		this.getFaultInfo();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.faults = [];
		this.getFaultInfo()
		setTimeout(()=>{
			uni.stopPullDownRefresh();
		},800)
	},
	methods: {
		// 获取故障信息
		getFaultInfo() {
			if (!this.machineId) return;
			this.$http({
				url: this.$api.factoryUrl + 'faultlist',
				data: {
					machineId: this.machineId,
					page: this.page,
					row: 10
				}
			}).then(res => {
				this.faults = [...this.faults,...res];
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f0f0f0;
}
.container {
	padding: 20rpx;

	.item {
		box-shadow: 0 0 7rpx 0 rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;
		padding: 30rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		font-size: 32rpx;

		> view:nth-child(1) {
			display: flex;
			justify-content: space-between;
		}
		> view:nth-child(2) {
			margin-top: 40rpx;
		}

		&.fault {
			.code {
				color: #ff3333;
				width: 370rpx;
			}
			view {
				color: #999999;
			}
		}

		&.relief {
			background: #66cc99;
			view {
				color: #ffffff !important;
			}
		}
	}
}
</style>
